 <template>
	<div class="wrapper">
		<div class="content">
			<el-form ref="formObj" :model="pwdform" :rules="rules" style="margin-top: 50px;padding: 0 70px ; ">
				<el-form-item prop="email">
					<el-input :prefix-icon="User" v-model="pwdform.email" placeholder="请输入电子邮箱"></el-input>
				</el-form-item>
				<el-form-item prop="code">
					<el-input style="width: 348px; margin-right: 10px;" :prefix-icon="CircleCheck" v-model="pwdform.code" placeholder="请输入验证码"></el-input>
					<el-button :disabled="isCountingDown" type="danger" plain @click="sendCode" style="width: 100px;">
						{{ isCountingDown ? `${countdown}s后再发送` : '发送验证码' }}
					</el-button>
				</el-form-item>
					<div style="margin-top: 70px; display: flex; justify-content: center; align-items: center;">
						<el-button style="width: 150px;" plain type="danger" :icon="Confim" @click="find">确认修改</el-button>
					</div>
			</el-form>
			<el-dialog 
			  v-model="dialog.show" 
			  :close-on-click-modal="false" 
			  align-center 
			  center 
			  title="修改密码"
			  style="width: 400px;height: 184px;">
				<el-form ref="formObj2" :model="saveform" :rules="rules2">
					<el-form-item prop="password">
						<el-input :prefix-icon="Lock" placeholder="请输入新密码" v-model="saveform.password" show-password></el-input>
					</el-form-item>
					<el-form-item prop="repass">
						<el-input :prefix-icon="Check" placeholder="请确认密码" v-model="saveform.repass" show-password></el-input>
					</el-form-item>
					<el-form-item>
						<el-button style="position: absolute;right: 0%; margin-top: 20px;" :icon="Confim" type="danger" plain @click="save">确认</el-button>
					</el-form-item>
				</el-form>
			</el-dialog>
		</div>
	</div>
</template>

<script setup>
import { User,CircleCheck,Lock,Check } from '@element-plus/icons-vue'
import { get,post } from '@/axios'
import { _axios } from '@/axios'
import { ref,reactive } from 'vue'
import router from '@/router'
import Confim from '@/components/icons/confim'
const emits = defineEmits(['update:show'])
const dialog = reactive({
	show:false
})
const pwdform=reactive({
	email:'',
	code:''
})
const saveform=reactive({
	password:'',
	repass:''
})
const formObj = ref()
const formObj2 = ref()
function check (rule, value, callback) {
	get("/admin/check",{id:null,value,field: rule.field },content => {
		if(!content){
			callback()
		}else{
			callback(new Error())
		}
	})
}
const rules = reactive({
	email:[
		{ required:true, message: '请输入电子邮箱', trigger:'blur' },
		{ type: 'email', message: '请输入正确的电子邮箱', trigger: 'blur' },
		{ validator: check, message: '该用户不存在', trigger: 'blur' }
	],
	code:[
		{ required:true, message: '请输入验证码', trigger:'blur' }
	]
})
const rules2 = reactive({
	password:[
		{ required:true, message: '请输入密码', trigger:'blur' }
	],
	repass:[
		{ required:true, message: '请再次输入密码', trigger:'blur' }
	]
})
const countdown = ref(60)  // 倒计时秒数
const isCountingDown = ref(false)  // 是否正在倒计时
function sendCode(){
	formObj.value.validateField(['email'],valid => {
		if(valid){
			post("/admin/sendCode",{email:pwdform.email},content => {
				ElMessage({
					message:'验证码已发送',
					type:'success'
				})
				startCountdown()
			})
		}else{
			ElMessage({
				message:'验证失败，该用户不存在',
				type:'error'
			})
		}
	})
}
function startCountdown() {
	isCountingDown.value = true
	countdown.value = 60
	const timer = setInterval(() => {
		countdown.value -= 1
		if(countdown.value <= 0){
			clearInterval(timer)
			isCountingDown.value = false
		}
	},1000)
}
function find(){
	formObj.value.validate(valid => {
		if(valid){
			post('/admin/checkCode',{ email:pwdform.email,code: pwdform.code},content => {
				if(content){
					dialog.show = true
				}else{
					ElMessage({
						message:'验证码错误或验证码已过期',
						type:'error'
					})
				}
			})
		}
	})
}
function save(){
	formObj2.value.validate(valid => {
		if(saveform.password === saveform.repass){
			const formData = new FormData()
			formData.append("email",pwdform["email"])
			formData.append("password",saveform["password"])
			_axios.request({
				url: '/admin/change',
				method: 'post',
				data:formData
			}).then(response => {
				ElMessage({
					message:'修改密码成功',
					type:'success'
				})
				dialog.show=false
				emits('update:show',false)
			})
		}else{
			ElMessage({
				message:'两次密码输入必须一致',
				type:'error'
			})
		}
	})
}
</script>

<style scoped lang="scss">
.wrapper{
		width: 100%;
		display: flex;
		perspective: 1000px;
		.content{
			width: 600px;
			margin: auto;
		}
	}
</style>